<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>员工管理</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/icon.css"/>">

<script type="text/javascript" src="<c:url value="/js/jquery.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/js/easyui-lang-zh_CN.js"/>"></script>
</head>
<body>
	<script type="text/javascript">
		$(function() {
			//显示全部
			$("#emp-reload").linkbutton({
				onClick : function() {
					$("#tb-emps").datagrid({
						url : 'queryEmpsByPage',
						method : 'get'
					})
				}
			});

			//根据员工名称进行查询
			//搜索员工
			$('#emp-search').searchbox({
				searcher : function(value, name) {
					$("#tb-emps").datagrid({
						url : 'queryEmpsByName',
						method : 'post',
						queryParams : {
							ename : value
						}
					});
				}
			});
			//删除全部员工
			$("#emp-delete").linkbutton({
				onClick:function(){
					$.messager.confirm("提示","确定要删除吗",
							function(v){
						if(v){
							//获取所有选中的编号
				var rows=$("#tb-emps").datagrid("getSelections");
						//将编号保存到数组中
						var arr=[];
						for(var i=0;i<rows.length;i++){
							arr.push(rows[i].empno);
						}
						//用form提交
						$('<form>').form('submit', {
						    url:'deleteEmpBatch',
						    onSubmit: function(param){
								param.list=arr;
						    },
						    success:function(data){
								var json=eval("("+data+")");
						$.messager.alert("提示",json.reason);
						$("#tb-emps").datagrid("reload");
						    }});
				
						}});
				}});
			
			//打开添加员工的窗口
			$("#emp-add").linkbutton({
				onClick:function(){
					$('#win-add').window({'title':'录入员工'});
					$('#form-add').form('clear');
					$("#win-add").window('open');
				}})
		
			//提交添加/编辑员工的请求
		$("#btn-ok").linkbutton({onClick: function(){
			var title = $('#win-add').window("options").title;
			var url = (title == '录入员工' ? 'addNewEmp':'deitEmp');
			
			$('#form-add').form('submit', {
				url: url,
			    onSubmit: function(){
			    	//验证
			    	return $(this).form("validate");
			    },
			    success:function(data){
			    	var json = eval("(" + data + ")");
					$.messager.alert("提示", json.reason);
					//关闭窗口
					$('#win-add').window('close');
					//重新加载数据
					$("#tb-emps").datagrid("reload");
					$(this).form("clear");
			    }
			});
		}});
		
				//打开编辑员工的窗口
				$("#emp-edit").linkbutton({
					onClick:function(){
				 var rows=$("#tb-emps").datagrid("getSelections");
				 if(rows.length == 1){
					 $("#win-add").window({"title":'编辑员工'});
					 $("#win-add").window("open");
					 //初始化表单
					 var empno=rows[0].empno;
					 var empno = rows[0].empno;
						$.getJSON("findEmpById", {"empno": empno}, function(data){
							$("#form-add").form("load", data);
							$("#cc").combogrid({value: data.dept.deptno});
						});
					
				 }else{
					 $.messager.alert("提示","只能够选择一条记录，您选择了"+rows.length+"条")
				 }
					}})
		})
	</script>
	<table id="tb-emps" class="easyui-datagrid"
		data-options="url:'queryEmpsByPage',
 pagination: true,
 pageSize:5,
 rownumbers: true,
 fitColumns:true,
 rownumber:true,
 border:false,
 pageList:[5,10,20,30,40,50],
 fit:true,
 toolbar:'#tb'
 ">
		<thead>
			<tr>
				<th data-options="field:'empno',width:'3%',checkbox:true">编号</th>
				<th data-options="field:'ename',width:'15%'">姓名</th>
				<th data-options="field:'job',width:'15%'">职务</th>
				<th data-options="field:'hiredate',width:'20%'">入职日期</th>
				<th data-options="field:'sal',width:'10%'">薪水</th>
				<th data-options="field:'comm',width:'10%'">津贴</th>
				<th data-options="field:'dename',width:'15%'">部门</th>
			</tr>
		</thead>
	</table>

	<div id="tb">
		<a id="emp-add" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true">录入员工</a> <a
			id="emp-edit" class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true">编辑员工</a> <a
			id="emp-delete" class="easyui-linkbutton"
			data-options="iconCls:'icon-cancel',plain:true">批量删除</a> <a
			id="emp-reload" class="easyui-linkbutton"
			data-options="iconCls:'icon-reload',plain:true">全部员工</a> <input
			id="emp-search" class="easyui-searchbox"
			data-options="menu:'#mm',prompt: '请输入员工姓名',width: 200 " />
		<div id="mm" style="width: 200px">
			<div data-options="name:'item1'">名称</div>
		</div>
	</div>
  <!-- -添加员工的窗口 -->
  <div id="win-add" class="easyui-window" title="录入员工"
  data-options="collapsible:false,
  minnimizable:false,maximizable:false,
  modal:true,iconCls:'icon-save',closed:true"
  style="width:400px;height:320px;padding:5px">
    <div id="cc" class="easyui-layout" data-options="fit:true">
	     <div  data-options="region:'center'" style="padding:10px">
	         <form id="form-add" method="post" >
	                 <div class="item">
	                 		<input name="empno" class="easyui-textbox" 
	                         data-options="label:'编号',width:200">
	                 </div>
	                 
	                  <div class="item">
	                 		<input name="ename" class="easyui-textbox" 
	                         data-options="label:'姓名',width:250">
	                 </div>
	                 
	                  <div class="item">
	                 		<input name="job" class="easyui-textbox" 
	                         data-options="label:'职务',width:200">
	                 </div>
	                 
	                  <div class="item">
	                 		<input name="hiredate" class="easyui-datebox" 
	                         data-options="label:'入职日期',width:200">
	                 </div>
	                  <div class="item">
	                 		<input name="sal" class="easyui-textbox" 
	                         data-options="label:'薪水',width:200">
	                 </div>
	                  <div class="item">
	                 		<input name="comm" class="easyui-textbox" 
	                         data-options="label:'津贴',width:200">
	                 </div>
	                  <div class="item">
						<select name="dept.deptno" id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
						    data-options="
						    label: '部门',
						    panelWidth:300,
						    idField:'deptno',
						    textField:'dname',
						    url:'queryAllDepts',
						    columns:[[
						    {field:'deptno',title:'编号',width:40},
						    {field:'dname',title:'部门名称',width:100},
						    {field:'loc',title:'地址',width:150},
						    ]]
						    "></select>
					</div>
	         </form>

	     </div>
	       
	       <div data-options="region:'south',border:false" 
	      style="text-align:right;padding:5px 0 0;">
				<a id="btn-ok" class="easyui-linkbutton"
				 data-options="iconCls:'icon-ok', plain:true" >确定</a>
				 
				<a class="easyui-linkbutton" 
				data-options="iconCls:'icon-cancel', plain:true"
				 href="javascript:$('#win-add').window('close');" onclick="">取消</a>
			</div>
	      
	   
  
 </div>
   </div>

</body>
</html>